<template>
	<view>
		<view class="row topFiexd j-sa a-center ">
			<block v-for="(item,index) in pageData" :key="index">
			<view class="size-30 p-bot16 p-re " 
			     :class="current == index?'white active':'color_7e'" 
				 @click="current = index">{{item.title}}</view>
			</block>
		</view>
		
		
		<view class="viewbox auto bg38 padding20 white m-top20 bor_radius_20" >
			<mp-html :content="pageData[current].content" lazy-load scroll-table selectable use-anchor show-with-animation />
		</view>
		
	
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:['勋章权益','赋能权益','DAO权益'],
				current:0,
				pageData:[],
			}
		},
		onLoad() {
			this.rightsList();
		},
		methods: {
			rightsList(){
				this.$http.get('/index/rightsList').then(res=>{
					let info = res.data;
					info.forEach((item,index)=>{
						item.content = this.$common.richTxt(item.content).html;
					})
					this.pageData = info;
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.topFiexd{
		height: 100rpx;
		background-color: #1e201f;
	}
	.ttitle::after{
		content: '';
		width:8rpx;
		height: 26rpx;
		background-color: #ead097;
		position: absolute;
		border-radius: 20rpx;
		left:0;top:50%;
		transform: translate(0,-50%);
	}
	.active::after{
		content: "";
		width:40rpx;
		height: 6rpx;
		border-radius: 10rpx;
		background-color: #ead097;
		position: absolute;
		bottom: 0;
		left:50%;
		transform: translate(-50%,0);
	}
</style>
